<template>
  <div class="home">
    <div>
      这是首页
      <div class="ballComponent">
        <!-- 注意不能只留组件的标签，否则会报错，因为遍历会出来多个同级1标签，模板只能由一个根标签 -->
        <MyBall :num="item" v-for="(item,index) in number" :key="index" />
      </div>
    </div>
    <!-- <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />-->
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from "@/components/HelloWorld.vue";

// 导入小球的子组件
import MyBall from "@/components/myball.vue";

export default {
  // name: "MyBall",
  components: {
    MyBall
  },
  // 数据
  data() {
    return {
      //注意显示是属性，不要使用等于号 number=[]
      number: []
    };
  },
  // 获取7个不同的数字
  created() {
    // 循环获取7个数字
    while (this.number.length < 7) {
      // 定义随机数
      let num = (Math.random() * 32 + 1).toFixed(0);
      // 获取7个不同的随机数
      if (this.number.indexOf(num) == -1) {
        this.number.push(num);
      }
    }
  }
};
</script>

